<template>
  <div class="supplier">
    <el-row style="height: 100%">
      <el-col :span="indexPageSize" style="height: 100%">
        <pageCard :title-name="'厂家名录'" :type="'pageTitle'">
          <div class="topText">公司名称：</div>
          <el-input
            v-model="search.name"
            placeholder="请输入"
            class="searchInput"
            @keyup.enter.native="searchClick"
          />
          <el-button type="primary" class="topBtn" icon="el-icon-search" @click="searchClick">搜索</el-button>
          <div class="topBtnDiv">
            <el-button
              v-permission="['system:supplier:add']"
              type="primary"
              plain
              class="topBtn"
              @click="alertForm('add')"
            >
              新增
            </el-button>
            <el-dropdown v-permission="['system:supplier:export']" trigger="click" @command="exportAll">
              <el-button plain type="primary" class="topBtn">
                导出
                <i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="single">导出选中</el-dropdown-item>
                <el-dropdown-item command="all">导出全部</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <myTable
            ref="myTable"
            style="height: 100%"
            :row-key="'id'"
            :table-label="tableLabel"
            :table-data="tableData"
            :table-total-size="tableTotalSize"
            :search-data="searchData"
            @getTableData="getTableData"
            @handleSelectionChange="handleSelectionChange"
            @rowClickChange="rowClickChange"
          >
            <template #operating="slotProps">
              <el-link
                v-permission="['system:supplier:file']"
                :underline="false"
                type="primary"
                @click="fileClick(slotProps.rowValue)"
              >
                附件
              </el-link>
              <el-link
                v-permission="['system:supplier:person']"
                :underline="false"
                type="primary"
                @click="personClick(slotProps.rowValue)"
              >
                联系人
              </el-link>
              <el-link
                v-permission="['system:supplier:edit']"
                :underline="false"
                type="primary"
                @click="alertForm('edit', slotProps.rowValue)"
              >
                修改
              </el-link>
              <el-link
                v-permission="['system:supplier:del']"
                :underline="false"
                type="danger"
                @click="deleteClick(slotProps.rowValue)"
              >
                删除
              </el-link>
              <!-- <p>{{ slotProps.propValue }}</p> -->
            </template>
          </myTable>
          <pagination
            :table-total-size="tableTotalSize"
            :search-data="searchData"
            @getTableData="$refs.myTable.getTableData()"
          />
        </pageCard>
      </el-col>
      <el-col :span="24 - indexPageSize" style="height: 100%">
        <supplierFile
          v-if="pageRightType === 'file'"
          ref="supplierFile"
          :current-supplier="currentRow"
          @setPageIndex="setPageIndex"
        />
        <supplierPerson
          v-if="pageRightType === 'person'"
          ref="supplierPerson"
          :current-supplier="currentRow"
          @setPageIndex="setPageIndex"
        />
      </el-col>
    </el-row>
    <supplierForm
      v-if="pageType !== 'index'"
      ref="supplierForm"
      :current="currentRow"
      @closeForm="closeForm"
      @submitForm="submitForm"
    />
  </div>
</template>

<script>
import { downLoadFile } from '@/utils/download'
import {
  getSupplier,
  getSupplierExport,
  getSupplierExportAll,
  addSupplier,
  updateSupplier,
  deleteSupplier
} from '@/api/system-management'
import supplierPerson from './components/supplierPerson'
import supplierFile from './components/supplierFile'
import supplierForm from './components/supplierForm'
import pageCard from '@/components/page/pageCard'
import myTable from '@/components/Table/index'
import pagination from '@/components/Table/pagination'
import defaultSettings from '@/settings'
import { generateUUID, postMessage, receivedMessage } from '@/utils/index'
export default {
  name: 'Supplier',
  components: {
    pageCard,
    myTable,
    pagination,
    supplierForm,
    supplierPerson,
    supplierFile
  },
  data() {
    return {
      // 当前页面类型
      pageType: 'index',
      indexPageSize: 24,
      pageRightType: 'none',
      search: {
        name: '',
        chooseDate: null
      },
      searchData: {
        pageSize: 10,
        currentPage: 1,
        sort: {},
        params: {}
      },
      // table需要的数据
      tableData: [
        {
          supplier: '',
          Supplies: '',
          address: '',
          evaluationDate: '',
          score: '',
          remarks: ''
        }
      ],
      tableLabel: [
        {
          type: 'selection',
          show: true,
          width: 50,
          minWidth: 50
        },
        {
          prop: 'name',
          label: '厂家',
          width: 250,
          showOverflowTooltip: true
        },
        {
          prop: 'supplies',
          label: '产品/服务',
          width: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'address',
          label: '详细地址',
          showOverflowTooltip: false
        },
        // {
        //   prop: 'date',
        //   label: '评估日期',
        //   width: 150,
        //   minWidth: 150,
        //   showOverflowTooltip: false
        // },
        // {
        //   prop: 'assessScore',
        //   label: '评分',
        //   width: 100,
        //   showOverflowTooltip: false
        // },
        {
          prop: 'remark',
          label: '备注',
          width: 200,
          showOverflowTooltip: true
        },
        {
          prop: 'operating',
          label: '操作',
          fixed: 'right',
          type: 'scope',
          minWidth: 190,
          width: 190,
          showOverflowTooltip: false
        }
      ],
      tableTotalSize: null,
      multipleSelection: [],
      currentRow: {},
      callbackFun: null,
      getSupplierRequestId: generateUUID()
    }
  },
  mounted() {
    receivedMessage(this.dataHandle)
  },
  methods: {
    dataHandle(result) {
      let self = this
      let e = defaultSettings.isWPF ? result : { data: JSON.parse(result) }
      if (e.data.webInfo.requestId === self.getSupplierRequestId) {
        let res = e.data.response
        self.tableData = res.data
        self.tableTotalSize = res.total_count
        self.callbackFun(res.data)
      }
    },
    // 提交表单
    submitForm(data, type) {
      const obj = JSON.parse(JSON.stringify(data))
      obj['id'] = this.currentRow.id
      if (type === 'add') {
        addSupplier(data).then((res) => {
          this.$notify({
            title: '成功',
            message: '添加厂家成功!',
            type: 'success'
          })
          this.$refs.supplierForm.closeForm()
          this.$refs.myTable.getTableData()
        })
      } else {
        updateSupplier(data).then((res) => {
          this.$notify({
            title: '成功',
            message: '修改厂家成功!',
            type: 'success'
          })
          this.$refs.supplierForm.closeForm()
          this.$refs.myTable.getTableData()
        })
      }
    },
    // 删除厂家
    deleteClick(row) {
      this.$confirm('此操作将永久删除该厂家, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteSupplier({ id: row.id }).then((res) => {
            this.$refs.myTable.getTableData()
            this.$notify({
              title: '成功',
              message: '已删除改厂家',
              type: 'success'
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 导出文件
    exportClick() {
      if (this.multipleSelection.length === 0) {
        this.$message('请先选择厂家!')
        return
      }
      getSupplierExport(this.multipleSelection).then((res) => {
        downLoadFile(process.env.VUE_APP_BASE_API + res.url)
      })
    },
    // 导出全部
    exportAll(command) {
      if (command === 'single') {
        this.exportClick()
      } else {
        getSupplierExportAll().then((res) => {
          downLoadFile(process.env.VUE_APP_BASE_API + res.url)
        })
      }
    },
    // 点击联系人
    personClick() {
      this.pageRightType = 'person'
      this.indexPageSize = 15
    },
    // 点击附件
    fileClick(row) {
      this.pageRightType = 'file'
      this.indexPageSize = 15
      this.$nextTick(() => {
        this.$refs.supplierFile.$refs.myTable.getTableData()
      })
    },
    // 还原index页面
    setPageIndex() {
      this.pageRightType = 'index'
      this.indexPageSize = 24
    },
    // 点击新增或者编辑
    alertForm(type, row) {
      this.pageType = type
      this.$nextTick(() => {
        if (type === 'edit') {
          for (const item of this.tableData) {
            if (item.id === row.id) {
              this.$refs.supplierForm.is(this.pageType, item)
            }
          }
        } else {
          this.$refs.supplierForm.is(this.pageType)
        }
      })
    },
    // 关闭表单
    closeForm() {
      this.pageType = 'index'
    },
    // 获取tableData
    getTableData(cab) {
      if (defaultSettings.isWPF || defaultSettings.isCEF) {
        this.callbackFun = cab
        this.getSupplierRequestId = generateUUID()
        let message = {
          RequestUrl: process.env.VUE_APP_URL + '/vue/supplier/load',
          RequestMethod: 'POST',
          Headers: {
            contentType: 'application/json'
          },
          QueryParameter: {},
          RequestBody: this.searchData,
          WebInfo: {
            requestId: this.getSupplierRequestId
          }
        }
        postMessage(message)
      } else {
        getSupplier(this.searchData).then((res) => {
          this.tableData = res.data
          this.tableTotalSize = res.total_count
          cab(res.data)
        })
      }
    },
    // 搜索
    searchClick() {
      this.searchData.currentPage = 1
      this.searchData.params['name'] = this.search.name
      this.$refs.myTable.getTableData()
    },
    // 复选框回调函数
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 点击行回调函数
    rowClickChange(val) {
      this.currentRow = val
      this.$nextTick(() => {
        if (this.pageRightType === 'person') {
          this.$refs.supplierPerson.$refs.myTable.getTableData()
        }
        if (this.pageRightType === 'file') {
          this.$refs.supplierFile.$refs.myTable.getTableData(this.currentRow.id)
        }
      })
      // this.getBookingDevice(val.id)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../styles/pageTableTop.scss';
.supplier {
  height: 99%;
}
.el-link + .el-link {
  margin-left: 0;
}
</style>
